<template>
  <div class="bibi">
    <ul>
      <li>今日</li>
      <li>本周</li>
      <li>本月</li>
      <li>全年</li>
      <li>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </li>
    </ul>
    <div id="bmain" style="width: 800px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data(){
        return{
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        }
    },
  mounted() {
    var chartDom = document.getElementById("bmain");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "入账统计",
        left: "6%",
        top:'6px',
        textStyle: {
          color: "#666",
          fontWeight: "normal",
          fontSize: "18px",
        },
      },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

<style scoped>
.bibi{
  position:relative;
}
ul{
    display: flex;
    align-items: center;
    height: 40px;
    position: absolute;
    left: 152px;
}
li{
    height: 40px;
    width: 40px;
    color: #aaa;
    font-size: 16px;
    line-height: 40px;
}
li:last-child{
    width: 300px;

}
</style>